<template>
	<view>
		<!-- 选择问题的类型 -->
		<view class="title padding20">
			选择问题类型
		</view>
		
		<view class="type-list">
			<view class="type-item mb10" 
			:class="{active: current === index}"
			v-for='(item, index) in ["功能问题", "性能问题", "体验问题", "其他"]'
			:key="index"
			@click="handleChoose(index)">
				{{item}}
			</view>
		</view>
		
		
		<!-- 问题的输入框 -->
		<textarea placeholder="请描述下您的问题" class="textarea padding20"/>
		
		<!-- 上传图片 -->
		<view class="title padding20">
			上传图片
		</view>
		
		<view class="img-list padding20">
			<view class="img-item" 
			v-for="(item, index) in images" 
			:key="index">
				<!-- 关闭按钮的图片 -->
				<icon type="clear" size="16" color="#ff0000" @click="handleCancel(index)"></icon>
				<image :src="item" mode="aspectFill"></image>
			</view>
			<!-- 加号 -->
			<view class="add-image" @click="handleChooseImage">
				+
			</view>
		</view>
		
		<button type="warn" class="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				// 上传的图片数组
				images: []
			}
		},
		methods: {
			// 选择问题类型的事件
			handleChoose(index) {
				this.current = index;
			},
			// 选择图片
			handleChooseImage(){
				uni.chooseImage({
				    count: 4, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res) => {
						//  如果是数组，表示一次获取多张图片
						if(Array.isArray(res.tempFilePaths)){
							this.images = [...this.images, ...res.tempFilePaths]
						}else{
							this.images.push(res.tempFilePaths);
						}
				    }
				});
			},
			
			//  删除图片
			handleCancel(index){
				this.images.splice(index, 1);
			}
		}
	}
</script>

<style lang="less">
.padding20{
	padding: 20rpx;
}

.mb10{
	margin-bottom: 20rpx!important;
}

.title{
	font-size: 14px;
}

.type-list{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 10px #eee solid;
	
	.type-item{
		margin: 0 35rpx;
		height: 46rpx;
		line-height: 46rpx;
		width: 181rpx;
		text-align: center;
		border-radius: 50px;
		background: #eee;
		font-size: 12px;
		justify-self: flex-start;
	}
	
	.active{
		color: red;
		background: #ffe6e6;
		border-color: red;;
	}
}

.textarea{
	border-bottom: 10px #eee solid;
}

.img-list{
	display: flex;
	margin: 0 10rpx;
	
	.img-item{
		width: 128rpx;
		height: 128rpx;
		position: relative;
		margin-right: 10rpx;
		
		 image{
			 width: 128rpx;
			 height: 128rpx;
			 display: block;
		 }
		 
		 icon{
			 position: absolute;
			 right: -5px;
			 top: -5px;
			 background: #fff;
			 border-radius: 50%;
		 }
	}
	
	.add-image{
		width: 128rpx;
		height: 128rpx;
		background: #999;
		font-size: 50rpx;
		line-height: 128rpx;
		text-align: center;
	}
}
</style>
